<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css优先级</title>
    <!--
        多重样式（Multiple Styles）：如果外部样式、内部样式和内联样式同时应用于同一个元素，就是使多重样式的情况。
        一般情况下，优先级如下：
        （外部样式）External style sheet <（内部样式）Internal style sheet <（内联样式）Inline style
        有个例外的情况，就是如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。
    -->

    <!--
        CSS 优先级法则：
        A  选择器都有一个权值，权值越大越优先；
        B  当权值相等时，后出现的样式表设置要优于先出现的样式表设置；
        C  创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式；
        D  继承的CSS 样式不如后来指定的CSS 样式；
        E  在同一组属性设置中标有“!important”规则的优先级最大；
    -->
    
    <!--引用外部样式-->
    <link rel="stylesheet" type="text/css" href="style.css">
    
    <!--内部样式表-->
    <style>
        *{
            /*  *号是一个通配符,代表所有标签元素,
            可能经常用在设置盒模型或是设置通用样式.*/
            color: cadetblue;
            box-sizing: border-box;
        }

        body{
            background-color: red;
        }
        

        /*选择器的优先权
        内联样式>id选择器>类选择器>元素选择器
        1.  内联样式表的权值最高 1000；
        2.  ID 选择器的权值为 100;
        3.  Class 类选择器的权值为 10;
        4.  HTML 标签选择器的权值为 1 ;
        */
        #adiv{
            /*background-color: pink;*/

            border: 10px solid blue;
        }

        .divclass{
            border: 10px solid burlywood;
        }

        div{
            /*!important 修改样式的优先级为最高,高于一切.*/
            border: 10px dotted lavender !important;
        }

        /*组合式的选择器优先级权重是累加的.*/
        section strong{
            color: red;
        }

        section>p>span>strong{
            color: blue;
        }
    </style>
</head>

<!--内联样式, 内联样式表相对于外部样式和内部样式, 优先级最高.-->
<body style="background-color: orange;">
    <div id="adiv" class="div_class" style="width: 200px; height: 200px; background-color: purple;">
        
    </div>

    <section>
        <p>hello<span><strong>Python</strong>!</span></p>
    </section>
</body>
</html>